<?php /*a:1:{s:65:"E:\phpstudy_pro\WWW\tp6test\app\admin\view\Mall\commodityAdd.html";i:1603272398;}*/ ?>
<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>后台中心</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../static/admin/css/font.css">
        <link rel="stylesheet" href="../static/admin/css/xadmin.css">
        <script type="text/javascript" src="../static/admin/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../static/admin/js/xadmin.js"></script>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
        <!-- 必须先引入2.0.8版本的hammer.min.js -->
        <script src="https://cdn.bootcdn.net/ajax/libs/hammer.js/2.0.8/hammer.js" type="text/javascript" charset="utf-8"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
            .gallery .img-item { position: relative; cursor: pointer; }

            .gallery .img-item .delete { position: absolute; display: block; width: 20px; height: 20px;
                color: #fff; background: rgba(232, 0, 0, 0.7);  line-height: 20px; text-align: center;
                border-radius: 50%; top: 25px; right: 25px; cursor: pointer; }

            .img { width: 100px; height: 100px; margin: 20px; cursor: pointer;}
            .btn-upload{ margin: 20px; float: left; display: block; width: 100px; height: 100px;
                border: 1px solid #ddd; background: #ebebeb; line-height: 100px; font-size: 14px;
                text-align: center; color: #808080; cursor: pointer; }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
        <form class="layui-form layui-form-pane" id="formdata" method="post" enctype="multipart/form-data">
            <!-- 上传图片模块 -->
            <div style="padding: 20px; font-size: 20px; ">商品图片</div>
            <div class="gallery" id="gallery">
                <div class="img-item" style="display: inline-block;" id="first-btn-upload">
                    <label for="btn-upload" class="btn-upload" id="btn-upload">点击上传</label>
                    <div style="clear: both;"></div>
                </div>
            </div>
            <input id="file" type="file" multiple style="display: none">
            <div class="box">
                <img src="" />
            </div>
    </form>
    <input type="file" id='p_image' accept="image/*" capture='camera' style="opacity: 0"/>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label">
                            <span class="x-red">*</span>商品名称
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_repass" name="label" required="" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="money" class="layui-form-label">
                            <span class="x-red">*</span>商品金额
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="money" name="money" required="" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <textarea id="demo" lay-verify="content" style="display: none;" name="text"></textarea>
            <img id="tempImage" src="" style="display:none;"/>
                <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label">
                      </label>
                      <button  id="uploadpic" class="layui-btn" lay-filter="uploadpic" lay-submit>
                          增加
                      </button>
                  </div>
            </form>
        <script>
            layui.use(['layedit','form'], function(){
                var form = layui.form;
                var layedit = layui.layedit;
                layedit.set({
                    uploadImage: {
                        url: '/Mall/addrichtext' //接口url
                        ,type: 'post' //默认post
                    }
                });
                var index = layedit.build('demo', {
                    height: 180 ,//设置编辑器高度
                });
                //提交时把值同步到文本域中
                form.verify({
                    //content富文本域中的lay-verify值
                    content: function(value) {
                        layedit.sync(index);
                    }
                });
            });

            $(function  () {
                layui.use('form', function(){
                    var form = layui.form;
                    var layer = layui.layer;
                    <!-- 监听提交 -->
                    form.on('submit(uploadpic)', function(data){
                        layui.use('jquery',function(){
                            var $=layui.$;
                            // 创建FormData根据form
                            var uploaddata = new FormData($("#formdata")[0]);
                            // 遍历图片数组把图片添加到FormData中
                            var maxsize = 0;
                            for (var i = 0; i < files.length; i++) {
                                uploaddata.append("file[]", files[i]);
                                maxsize = maxsize + files[i].size;
                            }
							var arr = [];
							for(let i in data.field){
								arr.push(data.field[i]);
							}
							uploaddata.append("mes",arr);
                            if(maxsize>52428800){
                                layer.msg('上传的文件总大小不能超过50MB，请重新上传！');
                                return;
                            }
								$.ajax({
                                type: 'post',
                                url: 'upload', // ajax请求路径
                                data: uploaddata,
                                async: true,
                                contentType: false,
                                processData: false,
                                success: function(data){
								if(data.status == 200){
                                    layer.msg('添加完成', {
                                        icon: 1,
                                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        // 获得frame索引
                                        var index = parent.layer.getFrameIndex(window.name);
                                        //关闭当前frame
                                        parent.layer.close(index);
                                        parent.location.href = "/Mall/addMall"
                                    });
                                }else{
                                    layer.open({
                                        title: data.status
                                        ,content: data.message
                                    });
                                }
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    layer.msg("发生错误!");
                                }
							});
                        });
                        return false;//禁止跳转，否则会提交两次，且页面会刷新

                    });
                });
            })
            // 创建数组保存图片
            var files = new Array();
            var id = 0;
            // 选择图片按钮隐藏input[file]
            $("#btn-upload").click(function() {
                $("#file").trigger("click");
            });
            // 选择图片
            $("#file").change(function() {
                // 获取所有图片
                var img = document.getElementById("file").files;
                // 遍历
                for (var i = 0; i < img.length; i++) {
                    // 得到图片
                    var file = img[i];
                    // 判断是否是图片

                    var flag = judgeImgSuffix(file.name);
                    if(flag){

                    }else{
                        layer.msg("要求图片格式为png,jpg,jpeg,bmp!");
                        return;
                    }

                    // 把图片存到数组中
                    files[id] = file;
                    id++;
                    // 获取图片路径
                    var url = URL.createObjectURL(file);

                    // 创建img
                    var box = document.createElement("img");
                    box.setAttribute("src", url);
                    box.className = 'img';


                    // 创建div
                    var imgBox = document.createElement("div");
                    imgBox.style.float = 'left';
                    imgBox.className = 'img-item';

                    // 创建span
                    var deleteIcon = document.createElement("span");
                    deleteIcon.className = 'delete';
                    deleteIcon.innerText = 'x';
                    // 把图片名绑定到data里面
                    deleteIcon.id = img[i].name;
                    // 把img和span加入到div中
                    imgBox.appendChild(deleteIcon);
                    imgBox.appendChild(box);
                    // 获取id=gallery的div
                    var body = document.getElementsByClassName("gallery")[0];
                    // body.appendChild(imgBox);
                    var showPlace =document.getElementsByClassName("img-item")[0];
                    body.insertBefore(imgBox,showPlace);
                    // 点击span事件
                    $(deleteIcon).click(function() {
                        // 获取data中的图片名
                        var filename = $(this).attr('id');
                        // 删除父节点
                        $(this).parent().remove();
                        var fileList = Array.from(files);
                        // 遍历数组
                        for (var j = 0; j < fileList.length; j++) {
                            // 通过图片名判断图片在数组中的位置然后删除
                            if (fileList[j].name == filename) {
                                fileList.splice(j, 1);
                                id--;
                                break;
                            }
                        }
                        files = fileList;
                    });
                }
            });

            // 判断是否是图片类型
            function judgeImgSuffix(path){
                var index = path.lastIndexOf('.');
                var suffix = "";
                if(index > 0){
                    suffix = path.substring(index+1);
                }
                if("png"==suffix || "jpg"==suffix || "jpeg"==suffix || "bmp"==suffix || "PNG"==suffix || "JPG"==suffix || "JPEG"==suffix || "BMP"==suffix){
                    return true;
                }else{
                    return false;
                }
            }
        </script>
    </body>

</html>
